<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_freg :: head(~{::title})">
    <meta charset="UTF-8">
    <!--移动端更好的适应-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博客发布</title>
    <link rel="stylesheet" href="../../static/dist/semantic/semantic.min.css"
          th:href="@{/dist/semantic/semantic.min.css}">
    <link rel="stylesheet" href="../../static/css/my.css" th:href="@{/css/my.css}">
    <link rel="stylesheet" href="../../static/lib/editormd/css/editormd.css"
          th:href="@{/lib/editormd/css/editormd.css}">
</head>
<body>
<!--    导航-->
<nav th:replace="_freg :: menu(1)" class="ui segment inverted attached m-padded-mini m-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary stackable menu">
            <h2 class="ui teal header item">后台管理</h2>
            <a href="#" class="m-item item m-mobile-hide active"><i class="home icon"></i>博客</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="idea icon"></i>分类</a>
            <a href="#" class="m-item item m-mobile-hide"><i class="tags icon"></i>标签</a>
            <div class="right menu m-item m-mobile-hide">
                <div class="ui dropdown item">
                    <div class="text">
                        <img class="ui avatar image" alt="me.jpg" src="../../static/images/me.jpg">
                        Dylan
                    </div>
                    <i class="dropdown icon"></i>
                    <div class="menu">
                        <a href="#" class="item">修改密码</a>
                        <a href="#" class="item">个人信息</a>
                        <a href="#" class="item">注销</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a href="#" class="ui m-menu m-toggle black icon button m-right-top m-mobile-show">
        <i class="sidebar icon"></i>
    </a>
</nav>
<!--    二级导航-->
<div class="ui attached pointing menu">
    <div class="ui container">
        <div class="right menu">
            <a href="#" th:href="@{/admin/blogs/toSave.do}" class="item active teal">发布</a>
            <a href="#" th:href="@{/admin/blogs}" class="item">列表</a>
        </div>
    </div>
</div>
<!--    中间内容-->
<div>
    <div class="m-container m-padded-big">
        <div class="ui container">
            <form action="#" th:action="${blog == null} ? @{/admin/blogs/save} : @{/admin/blogs/update}" method="post" class="ui form">
                <!--                发布 or 保存-->
                <input type="hidden" name="published" value="true">
                <input type="hidden" name="id" th:value="${blog != null} ? ${blog.id}">
               <!--            选择博客类型， 设置标题-->
                <div class="required field">
                    <div class="ui left labeled input">
                        <div class="ui selection compact teal basic dropdown label">
                            <input type="hidden" value="原创" th:value="${blog != null} ? ${blog.flag} : '原创'" name="flag">
                            <div class="text" th:text="${blog != null} ?  ${blog.flag} : '原创'">原创</div>
                            <i class="dropdown icon"></i>
                            <div class="menu">
                                <div class="item" data-value="原创">原创</div>
                                <div class="item" data-value="转载">转载</div>
                                <div class="item" data-value="收藏">收藏</div>
                            </div>
                        </div>
                        <input type="text" name="title" placeholder="标题" th:value="${blog != null} ?  ${blog.title}">
                    </div>
                </div>

                <!--            博客内容-->
                <div class="required field">
                    <div id="md-content" style="z-index: 1 !important;">
                        <textarea placeholder="博客内容" name="content" style="display: none" th:text="${blog != null} ? ${blog.content}">

                        </textarea>
                    </div>
                </div>
                <!--            分类和标签-->
                <div class="two fields">
                    <div class="field">
                        <div class="ui left labeled action input">
                            <label class="ui compact basic teal label">分类</label>
                            <div class="ui fluid selection dropdown">
                                <input type="hidden" name="typeId" th:value="${blog != null} ? ${blog.typeId}">
                                <i class="dropdown icon"></i>
                                <div class="default text">分类</div>
                                <!--                                <div class="menu" >-->
                                <!--                                    <div class="item" data-value="1">学习日志</div>-->
                                <!--                                    <div class="item" data-value="2">学习笔记</div>-->
                                <!--                                    <div class="item" data-value="3">思考与感悟</div>-->
                                <!--                                </div>-->
                                <div class="menu">
                                    <div class="item" th:each="type : ${types}" th:data-value="${type.id}"
                                         th:text="${type.name}">
                                        学习日志
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="field">
                        <div class="ui left labeled action input">
                            <label class="ui compact basic teal label">标签</label>
                            <div class="ui fluid selection multiple search dropdown">
<!--                                多选下拉列表 对应value : v1,v2...-->
                                <input type="hidden" name="tagIds" th:value="${blog != null} ? ${blog.tagIds}">
                                <i class="dropdown icon"></i>
                                <div class="default text">标签</div>
                                <!--                                <div class="menu">-->
                                <!--                                    <div class="item" data-value="1">Java</div>-->
                                <!--                                    <div class="item" data-value="2">JavaScript</div>-->
                                <!--                                    <div class="item" data-value="3">SpringBoot</div>-->
                                <!--                                </div>-->

                                <div class="menu">
                                    <div class="item" th:each="tag : ${tags}" th:data-value="${tag.id}"
                                         th:text="${tag.name}">
                                        Java
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
                <!--            首图引用地址-->
                <div class="field">
                    <div class="ui left labeled input">
                        <label class="ui teal basic label">首图</label>
                        <input type="text" name="firstPicture" placeholder="首图引用地址" th:value="${blog != null} ? ${blog.firstPicture}">
                    </div>
                </div>
                <!--            博客描述-->
                <div class="required field">
                    <textarea placeholder="博客描述" name="description" th:text="${blog != null} ? ${blog.description}">

                    </textarea>
                </div>
                <!--            四个复选按钮-->
                <div class="inline fields">
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" class="hidden" name="recommend" id="recommend" checked th:checked="${blog != null} ? ${blog.recommend}">
                            <label for="recommend">推荐</label>
                        </div>
                    </div>

                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" class="hidden" name="shareStatement" id="sharInfo" th:checked="${blog != null} ? ${blog.shareStatement}">
                            <label for="sharInfo">支持转载</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" class="hidden" name="appreciation" id="appreciation" th:checked="${blog != null} ? ${blog.appreciation}">
                            <label for="appreciation">支持赞赏</label>
                        </div>
                    </div>
                    <div class="field">
                        <div class="ui checkbox">
                            <input type="checkbox" class="hidden" name="reviewable" id="message" th:checked="${blog != null} ? ${blog.reviewable}">
                            <label for="message">支持留言</label>
                        </div>
                    </div>
                </div>

                <!--            表达验证错误提示-->
                <div class="ui error message"></div>
                <!--            按钮-->
                <div class="ui right aligned container">
                    <button type="button" class="ui blue button" onclick="window.history.go(-1)">返回</button>
                    <button class="ui brown button" id="btn-save">保存</button>
                    <button class="ui teal button" id="btn-publish">发布</button>
                </div>
            </form>
        </div>
    </div>
</div>

<!--    页脚-->
<footer th:replace="_freg :: footer" class="ui inverted segment  vertical m-padded-large">
    <div class="ui container center aligned">
        <div class="ui inverted stackable grid divided">
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="../../static/images/wechat.jpg" class="ui rounded image" alt="亚里士多得"
                             style="width: 100px">
                    </div>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted">最新博客</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">博客1</a>
                    <a href="#" class="item">博客1</a>
                    <a href="#" class="item">博客1</a>
                    <a href="#" class="item">博客1</a>
                </div>
            </div>
            <div class="three wide column">
                <h4 class="ui inverted">联系我</h4>
                <div class="ui inverted link list">
                    <a href="#" class="item">QQ:3402747477</a>
                    <a href="#" class="item">邮箱:3402747477@qq.com</a>
                </div>
            </div>
            <div class="seven wide column">
                <h4 class="ui inverted">介绍</h4>
                <div class="ui inverted link list">
                    <p class="m-opacity-mini">
                        这是我的个人博客、会分享关于编程、写作、思考相关的任何内容，希望可以给来到这儿的人有所帮助
                    </p>
                </div>
            </div>
        </div>
        <!--    分隔符-->
        <div class="ui inverted section divider"></div>
        <div class="m-text-thin m-text-spaced m-opacity-mini">
            Copyright 2023-now ZBlog Designed by dylan
        </div>
    </div>

</footer>

<!-- /*/<th:block th:replace="_freg :: script">/*/-->
<script src="../../static/dist/jquery/jquery-3.4.1.min.js" th:src="@{/dist/jquery/jquery-3.4.1.min.js}"></script>
<script rel="script" src="../../static/dist/semantic/semantic.js" th:src="@{/dist/semantic/semantic.js}"></script>
<script rel="script" src="../../static/lib/editormd/editormd.js" th:src="@{/lib/editormd/editormd.js}"></script>
<!--/*/</th:block>/*/-->


<script>
    var contentEditor;

    $(function () {
        contentEditor = editormd("md-content", {
            width: "100%",
            height: 640,
            syncScrolling: "single",
            // "../../static/lib/editormd/lib/"
            path: "/lib/editormd/lib/"
        });

        $('.m-menu.m-toggle').click(function () {
            $('.m-item').toggleClass('m-mobile-hide');
        });
        $(".dropdown").dropdown({
            on: "hover"
        });

        //保存按钮
        $("#btn-save").click(function (){
            $("input[name='published']").val(false);
        });
        //发布按钮
        $("#btn-publish").clone(function (){
            $("input[name='published']").val(true);
        });
        /*-- 表单验证 --*/
        $('.ui.form').form({
            fields: {
                title: {
                    identifier: 'title',
                    rules: [{
                        type: 'empty',
                        prompt: '标题：请输入博客标题'
                    }]
                },
                typeId: {
                    identifier: 'typeId',
                    rules: [{
                        type: 'empty',
                        prompt: '类型：请选择博客类型'
                    }]
                }
            }
        });


    });


</script>
</body>
</html>